<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"/>

	<xsl:param name="sortOrder">ascending</xsl:param>
	<xsl:param name="sortingField">Name</xsl:param>
	<xsl:param name="sortType">text</xsl:param>

<xsl:template match="/">
<html>
<head>
	<title>IT companies in the world</title>
	<script src="script.js"></script>
	<link rel="stylesheet" type="text/css" href="table.css" />
</head>
<body>	
	<xsl:call-template name="template-slides" />	
	<div style="display:block;" id="container-companies">
            <table>
				<thead>
					<tr>
						<!--<th>Name:</th>-->
						<th>
							<a href="javascript:sortBy('Name')">Name:</a>
						</th>
						<th>
							<a href="javascript:sortBy('Founder')">Founder:</a>
						</th>
						<th>Industry:</th>
						<th>
							<a href="javascript:sortBy('Revenue')">Revenue (in billions):</a>
						</th>
						<th>
							<a href="javascript:sortBy('Employees')">Employees:</a>
						</th>
						<th>Address:</th>
						<th>Picture:</th>
						<th>Description:</th>
					</tr>
				</thead>
				<tbody>
					<xsl:call-template name="template-companies" />
				</tbody>
			</table>
        </div>

</body>
</html>
</xsl:template>

	<xsl:template name="template-slides">
		<ul id="slides">
		<xsl:for-each select="CompaniesCatalog/Companies/Company">
			<li style="display:none">
			<img alt="" class="alignleft">
				<!--<xsl:attribute name="src">-->
				<!--	<xsl:value-of select="./Image/@URL"/>-->
				<!--</xsl:attribute>-->
				<xsl:attribute name="src">
					<xsl:call-template name="template-image">
						<xsl:with-param name="CompanyId" select="ID" />
					</xsl:call-template>
				</xsl:attribute>
			</img>
			
			
			<!--<img alt="picture" width="90px" height="30px">-->
			<!--	<xsl:attribute name="src">-->
			<!--		<xsl:value-of select="./Image/text()"/>-->
			<!--	</xsl:attribute>-->
			<!--</img>	-->
	
			<div class="slide-cnt">
				<h2 class="hotel-title"><xsl:value-of select="Name"/></h2>
				<p class="hotel-info"><xsl:value-of select="Description"/></p>
				<a href="#" class="red-btn">
					<xsl:attribute name="data-id">
						<xsl:value-of select="ID"/>
					</xsl:attribute>
					Виж повече ...
				</a>
			</div>
			 </li>
			<div style="display:block;">
				<xsl:attribute name="data-content-id">
						<xsl:value-of select="ID"/>
				</xsl:attribute> 
				<div>
					Name: <xsl:value-of select="Name" />
				</div>
			</div>
		</xsl:for-each>
		</ul>
    </xsl:template>
	
	<xsl:template name="template-companies">
		<xsl:for-each select="CompaniesCatalog/Companies/Company">
			<xsl:sort select="*[name(.)=$sortingField]" order="{$sortOrder}" data-type="{$sortType}"></xsl:sort>
			<tr>
				<td><xsl:value-of select="Name" /></td>
				<td><xsl:value-of select="Founder" /></td>
				<td>
					<xsl:value-of select="@Industry" />
					<!--<xsl:call-template name="template-industry">-->
					<!--	<xsl:with-param name="CompanyId" select="ID" />-->
					<!--</xsl:call-template>-->
				</td>
				<td><xsl:value-of select="Revenue" /></td>
				<td><xsl:value-of select="Employees" /></td>
				<td><xsl:value-of select="Address" />:</td>
				<td>
					<img alt="picture" width="90px" height="30px">
						<!--<xsl:attribute name="src">-->
						<!--	<xsl:value-of select="./Image/Src/text()"/>-->
						<!--</xsl:attribute>-->
						<xsl:attribute name="src">
							<xsl:call-template name="template-image">
								<xsl:with-param name="CompanyId" select="ID" />
							</xsl:call-template>
						</xsl:attribute>
					</img>	
				</td>
				<td><xsl:value-of select="Description" /></td>
			</tr>
		</xsl:for-each>
	</xsl:template>

	<xsl:template name="template-image">
		<xsl:param name="CompanyId" />
		<xsl:param name="ImageId" select="//CompaniesAndImage/CompanyImage[@CompanyId=$CompanyId]/@ImageId" />
		<xsl:value-of select="//Images/Image[@id=$ImageId]/Src/text()" />
	</xsl:template>
	
</xsl:stylesheet>